@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  @apply text-[var(--foreground)] bg-[var(--background)] font-sans;
}

.audio-indicator {
  @apply inline-block w-5 h-5 rounded-full align-middle bg-gray-400;
}

.audio-indicator.active {
  @apply bg-green-500;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.controls {
  @apply my-5;
}

.form-group {
  @apply mb-4;
}

label {
  @apply block mb-1 font-bold;
}

input,
select {
  @apply w-full px-2 py-2 text-lg text-black border border-gray-300 rounded;
}

button {
  @apply bg-blue-500 text-white border-none px-4 py-2 text-lg rounded cursor-pointer;
}

button:disabled {
  @apply bg-gray-300 cursor-not-allowed;
}

.status {
  @apply mt-3 p-3 rounded;
}

.status.error {
  @apply bg-red-100 text-red-700;
}

.status.success {
  @apply bg-green-100 text-green-700;
}